<template>
  <div>
    <div class="foot">
      <span
        >全选
        <input type="checkbox" v-model="allCheck" @change="check" />
      </span>
      <span style="margin-left: 20px">
        已选择：{{ checkLength }} / 全部：{{ $store.state.list.length }}
      </span>
      <button
        :style="{ width: '100px', display: checkLength ? 'inline-block' : '' }"
        @click="delCheck"
      >
        删除已选中
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allCheck: false,
    };
  },
  computed: {
    checkLength() {
      return this.$store.state.list.filter((item) => item.isCheck).length;
    },
  },
  watch: {
    checkLength() {
      // if (this.checkLength == this.$store.state.list.length){
      //   this.allCheck = true
      // } else {
      //   this.allCheck = false
      // }
      if (this.$store.state.list.length == 0) {
        this.allCheck = false;
        return;
      }
      this.allCheck = this.checkLength == this.$store.state.list.length;
    },
  },
  methods: {
    check() {
      // 全选的事件
      // console.log(this.allCheck);
      this.$store.state.list.forEach((item) => {
        item.isCheck = this.allCheck;
      });
    },

    delCheck() {
      this.$store.commit("delectCheck");
    },
  },
};
</script>